<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MinIO文件上传测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .upload-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 2px dashed #ddd;
            border-radius: 8px;
            background: #fafafa;
        }
        .upload-section h3 {
            margin-top: 0;
            color: #666;
        }
        input[type="file"] {
            margin: 10px 0;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        .result {
            margin-top: 15px;
            padding: 10px;
            border-radius: 4px;
            min-height: 20px;
        }
        .success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .image-preview {
            max-width: 200px;
            max-height: 200px;
            margin-top: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🚀 MinIO文件上传测试</h1>
        
        <!-- 科目图标上传 -->
        <div class="upload-section">
            <h3>📚 科目图标上传</h3>
            <input type="file" id="subjectIcon" accept="image/*">
            <button onclick="uploadSubjectIcon()">上传科目图标</button>
            <div id="subjectIconResult" class="result"></div>
        </div>

        <!-- 头像上传 -->
        <div class="upload-section">
            <h3>👤 头像上传</h3>
            <input type="file" id="avatar" accept="image/*">
            <button onclick="uploadAvatar()">上传头像</button>
            <div id="avatarResult" class="result"></div>
        </div>

        <!-- 课程封面上传 -->
        <div class="upload-section">
            <h3>📖 课程封面上传</h3>
            <input type="file" id="courseCover" accept="image/*">
            <button onclick="uploadCourseCover()">上传课程封面</button>
            <div id="courseCoverResult" class="result"></div>
        </div>

        <!-- 教师头像上传 -->
        <div class="upload-section">
            <h3>👨‍🏫 教师头像上传</h3>
            <input type="file" id="teacherAvatar" accept="image/*">
            <button onclick="uploadTeacherAvatar()">上传教师头像</button>
            <div id="teacherAvatarResult" class="result"></div>
        </div>

        <!-- 教师证书上传 -->
        <div class="upload-section">
            <h3>📜 教师证书上传</h3>
            <input type="file" id="teacherCertificate" accept="image/*">
            <button onclick="uploadTeacherCertificate()">上传教师证书</button>
            <div id="teacherCertificateResult" class="result"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:8082';

        // 通用上传函数
        async function uploadFile(endpoint, fileInputId, resultId) {
            const fileInput = document.getElementById(fileInputId);
            const resultDiv = document.getElementById(resultId);
            const file = fileInput.files[0];

            if (!file) {
                showResult(resultDiv, '请选择文件', 'error');
                return;
            }

            const formData = new FormData();
            formData.append('file', file);

            try {
                showResult(resultDiv, '上传中...', 'info');
                
                const response = await fetch(`${API_BASE}${endpoint}`, {
                    method: 'POST',
                    body: formData
                });

                const result = await response.json();
                
                if (result.code === 200) {
                    showResult(resultDiv, `✅ 上传成功！<br>URL: <a href="${result.data}" target="_blank">${result.data}</a><br><img src="${result.data}" class="image-preview" alt="预览图">`, 'success');
                } else {
                    showResult(resultDiv, `❌ 上传失败: ${result.msg || '未知错误'}`, 'error');
                }
            } catch (error) {
                showResult(resultDiv, `❌ 上传失败: ${error.message}`, 'error');
            }
        }

        // 显示结果
        function showResult(element, message, type) {
            element.innerHTML = message;
            element.className = `result ${type}`;
        }

        // 各种上传函数
        function uploadSubjectIcon() {
            uploadFile('/upload/subject-icon', 'subjectIcon', 'subjectIconResult');
        }

        function uploadAvatar() {
            uploadFile('/upload/avatar', 'avatar', 'avatarResult');
        }

        function uploadCourseCover() {
            uploadFile('/upload/course-cover', 'courseCover', 'courseCoverResult');
        }

        function uploadTeacherAvatar() {
            uploadFile('/upload/teacher-avatar', 'teacherAvatar', 'teacherAvatarResult');
        }

        function uploadTeacherCertificate() {
            uploadFile('/upload/teacher-certificate', 'teacherCertificate', 'teacherCertificateResult');
        }

        // 页面加载完成后的提示
        window.onload = function() {
            console.log('MinIO上传测试页面已加载');
            console.log('请确保后端服务已启动在端口8082');
        };
    </script>
</body>
</html>
